
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Page</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul li{
            display: block;
            float: left;
            height: inherit;
            /*overflow: hidden;*/
            /*margin: 0px 3px;*/
        }
        ul li a{
            float: left;
            display: block;
            height: 34px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            user-select: none;
            transition: all 0.2s;
            /*background-color: rgb(255, 255, 255);*/
            color: rgb(0, 0, 0);
            /*border-radius: 2px;*/
            /*padding: 0px 8px;*/
            /*border: 1px solid rgb(221, 221, 221);*/
            width: 100px;
            font-size: 13px;
            font-weight: 400;
        }
        .otherBtns, .centerBtns, .jumpBtns {
            float: left;
            height: inherit;
        }
        .otherLeft a{
            padding: 0 8px;
            float: left;
            display: block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: not-allowed;
            border-radius: 2px;
            text-decoration: none;
            user-select: none;
            transition: all 0.2s;
            background-color: rgb(255, 255, 255);
            margin: 0 3px;
            color: rgb(0, 0, 0);
            /*border: 1px solid rgb(221, 221, 221);*/
        }
        .otherRight a, .jumpBtns a{
            padding: 0 8px;
            float: left;
            display: block;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            border-radius: 2px;
            text-decoration: none;
            user-select: none;
            transition: all 0.2s;
            background-color: rgb(255, 255, 255);
            margin: 0 3px; color: rgb(0, 0, 0);
            /*border: 1px solid rgb(221, 221, 221);*/
        }
    </style>
</head>
<body>
<br />
<div style="margin-left:20px;width:1100px;">
    <div class="page_div2 paging" onselectstart="return false" style="font-size: 13px; font-family: 微软雅黑; font-weight: 400; height: 32px;">
        <div class="otherBtns otherLeft" style="border: 1px solid rgb(175, 214, 255);">
            <a value="档案信息">档案信息</a>
        </div>
        <div class="centerBtns" style="position: relative; overflow: hidden; width: 960px;height: 35px; /*border-top: 1px solid #AFD6FF;border-bottom: 1px solid #AFD6FF;*/background: #F7F7F7;">
            <ul style="position: absolute; height: inherit; list-style: none; left: 0px; top: 0px; margin: 0px; padding: 0px;height: 32px;border-top: 1px solid #AFD6FF;border-bottom: 1px solid #AFD6FF;">
                <li >
                    <a value="1">合同(1)</a></li>
                <li >
                    <a value="2" >发票(100)</a></li>
                <li >
                    <a value="3" >文件(3)</a></li>
                <li >
                    <a value="4" >图片(25)</a></li>
                <li >
                    <a value="5" >哈哈(12)</a></li>
                <li >
                    <a value="6" >测试哈哈(56)</a></li>
                <li >
                    <a value="7" >你好测试(568)</a></li>
                <li >
                    <a value="8" >测试你好(88)</a></li>
                <li >
                    <a value="9" >我是第(8)</a></li>
                <li >
                    <a value="10" >看看(58)</a></li>
            </ul>
        </div>
        <div class="otherBtns otherRight" style="border: 1px solid rgb(175, 214, 255);">
            <a value="下一页" style="width: 12px">&gt;&gt;</a>
        </div>
    </div>
</div>

<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">


    $this = $("body");
    var init = true;
    var currentPage = 1; //当前页
    var gapWidth = 3;     //间隙宽度
    var total = 10; //总页数
    var first = 1;   //中间显示页的起始位置，初始为1
    var showPage = 9; //显示的页数
    var middle = Math.ceil(showPage / 2);     //向上取整，获得中间数，用以后面计算出需要滚动的页数
    var last = showPage;  //中间显示页的终止位置，初始为显示页的长度
    var slideBool = true; //开起按钮点击

    var currentBgColor = "#fff";
    var centerBgColor = "none";
    var currentFontColor = "#000";
    var centerFontColor = "#000";
    var centerBorder = "1px solid #ddd";
    var currentBorder = "1px solid #f79898";
    var currentFontSize = 13;
    var fontSize = 13;
    var fontWeight = 400;   //字体宽度
    var currentFontWeight = 400;
    //去除火狐浏览器的transition样式
    if (/mozilla/.test(navigator.userAgent.toLowerCase()) && !/(compatible|webkit)/.test(navigator.userAgent.toLowerCase())) {
        $this.find("a").css("transition", "none");
    }

    $this.find(".centerBtns a").each(function (index, element) {
        $(element).click(function () {
            if(!slideBool){
                return;
            }
            if(!init){
                if(currentPage == index+1){
                    return
                }else{
                    currentPage = index+1;
                }
            }else{
                init = false;
            }
            clickPage = parseInt($(element).attr("value"), 10);  //点击页码
            //设置选中效果
            $this.find(".centerBtns a").each(function (suffix, item) {
                if (parseInt($(item).attr("value"), 10) == clickPage) {
                    if (!!currentBgColor.replace(/\s/g, ""))
                        $(item).css({ "background-color": currentBgColor }).parent().siblings().children().css("background-color", "");
                    if (!!currentFontColor.replace(/\s/g, ""))
                        $(item).css({ "color": currentFontColor }).parent().siblings().children().css({ "color": centerFontColor.replace(/\s/g, "") });
                    if (!!currentBorder.replace(/\s/g, ""))
//                        $(item).css({ "border": currentBorder }).parent().siblings().children().css({ "border": centerBorder });
                    if (!!currentFontSize)
                        $(item).css({ "font-size": currentFontSize + "px" }).parent().siblings().children().css({ "font-size": fontSize + "px" });
                    if (!!fontWeight)
                        $(item).css({ "font-weight": currentFontWeight }).parent().siblings().children().css({ "font-weight": fontWeight });
                }
            });


            var left = -parseInt($this.find("ul").css("left").replace(/\D/g, ""), 10); //获得当前ul的left坐标
            var liWidth = parseInt($this.find("ul li").eq(0).css("width").replace(/\D/g, ""), 10);   //单个li的宽度

            var slidePage = clickPage - middle;   //需要滑动的页数，正负表示左右方向
            console.log(index)

            //动画
            if (slidePage > 0 && last < total) {   //判断是否符合滚动规则 往右

                var beforeLast = last;

                //设置参数
                last += slidePage;
                if (last > total) {       //判断末尾移动长度大于的情况
                    last = total;
                    slidePage = total - beforeLast;
                }
                first += slidePage;
                middle += slidePage;

                //获得滚动宽度
                var slideWidth = slidePage * liWidth;

                //动画
                slideBool = false; //禁止按钮点击
                $this.find("ul").animate({ "left": left - slideWidth + "px" }, 300, function () {
                    slideBool = true;  //开启按钮点击
                });
            } else if (slidePage < 0 && first > 1) {    //判断是否符合滚动规则  往左

                var beforeFirst = first;

                //设置参数
                first += slidePage;
                if (first < 1) {       //判断开头移动长度少于的情况
                    first = 1;
                    slidePage = 1 - beforeFirst;
                }
                last += slidePage;
                middle += slidePage;

                //获得滚动宽度
                var slideWidth = slidePage * liWidth;

                //动画
                slideBool = false;  //禁止按钮点击
                $this.find("ul").animate({ "left": left - slideWidth + "px" }, 300, function () {
                    slideBool = true;  //开启按钮点击
                });
            }
        });
    });


    //获得中间div的长度和ul的长度并设置
    var centerWidth = 0;
    var centerAllWidth = 0;
    if (total > 0) {
        centerWidth = parseInt($this.find("ul li").eq(0).css("width").replace(/\D/g, ""), 10) * showPage;     //中间div的总宽度
        centerAllWidth = parseInt($this.find("ul li").eq(0).css("width").replace(/\D/g, ""), 10) * $this.find("ul li").length;     //中间ul的总宽度
    }

    if (!!gapWidth) {
//        centerWidth += (showPage + 1) * (gapWidth * 2) - (gapWidth * 2);
//        centerAllWidth += (total + 1) * (gapWidth * 2) - (gapWidth * 2);
    }

    //设置中间div宽度和其它样式
    $this.find(".centerBtns").css({
        "position": "relative",
        "overflow": "hidden",
        "width": centerWidth + "px"
    });

    //设置中间div内ul的宽度
  /*  $this.find(".centerBtns ul").css({
        "width": centerAllWidth + "px"
    });*/


    //初始化显示
//    if (opts.animation)
        $this.find(".centerBtns a").eq(currentPage - 1).trigger("click");   //初始化后自动展示到当前页，方式为滚动





</script>
</body>
</html>
